<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button>get</button>
    <button>post</button>
</body>
<script>
    const btns = document.querySelectorAll("button");
	btns[0].onclick = function(){
        const xhr = new XMLHttpRequest();
		xhr.responseType = "json";// 将响应体信息设置为json对象
		xhr.open("get","/sum?a=100&b=200");
		xhr.send();
		xhr.onload = function(){
			// 1- 响应体
			console.log(xhr.response);
			// 2- 获取所有的响应头信息
			console.log(xhr.getAllResponseHeaders());
			// 3- 获取名字为token响应头的值
            console.log(xhr.getResponseHeader("token"))
            // 4- 响应状态码
			console.log(xhr.status);
			// 5- 响应状态码说明
			console.log(xhr.statusText);
        }
    }

	btns[1].onclick = function(){
		const xhr = new XMLHttpRequest();
		xhr.open('post',"/sum");
		// // 设置请求体的格式：application/json
        // // 第一个参数是请求头的名字，第二个参数是请求头的值
        // xhr.setRequestHeader("Content-Type","application/json");// 通过设置属性名字为Content-Type的请求头来指定请求体的格式
		// // 接收的值即是请求体的数据,数据类型必须是字符串
        // xhr.send(JSON.stringify({a:100,b:200}));


		// 设置请求体的格式：application/x-www-form-urlencoded
		// 第一个参数是请求头的名字，第二个参数是请求头的值
		xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");// 通过设置属性名字为Content-Type的请求头来指定请求体的格式
		// 接收的值即是请求体的数据,数据类型必须是字符串
		xhr.send("a=100&b=200");
		xhr.onload = function(){
			console.log(xhr.response);
        }
    }
</script>
</html>